<template>
  <section class="page page-home">
    <div class="main_top">
      <!-- 顶部筛选项 -->
      <div class="main_top_wrap">
        <date-time
          :dateTime="form.dateTime"
          v-on:change-date-time="changeDateTime"
        ></date-time>
        <div class="nav_wrap">
          <div
            class="nav_item"
            v-for="(item, index) in whatResultsList"
            :key="index"
            :class="currentIndex == index ? 'active' : ''"
            @click="changeTab(item, index)"
          >
            <span>
              {{ item.name }}
            </span>
          </div>
        </div>
        <div class="flex_wrap">
          <div class="flex_box">
            <div
              class="flex_item"
              v-for="(item, index) in lineList"
              :key="index"
              @click="changeFlexItem(index)"
              :class="currentFlexIndex == index ? 'active' : ''"
            >
              <span class="label">
                {{ item.name }}
              </span>
              <img
                src="../../assets/images/settings.png"
                alt=""
                class="setting"
                v-if="item.status === 1"
                v-on:click.stop="editLine(item)"
              />
              <img
                src="../../assets/images/delete.png"
                alt=""
                v-if="item.status === 1"
                class="delete"
                v-on:click.stop="delLine(item.id)"
              />
            </div>
            <div class="add cursor_pointer">
              <img
                src="../../assets/images/add.png"
                alt=""
                @click="add_item()"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="main_center" v-loading="loading">
      <template>
        <div class="table-container">
          <div
            class="table"
            style="position: absolute;left: 17%;background: #ffffff;width: 80%;height: auto"
          >
            <div class="chart-column"></div>
            <div
              class="indicator-title"
              v-for="(item, index) in attrShowList"
              :key="index"
              v-show="item.show"
            >
              {{ item.title }}
            </div>
          </div>
          <div class="table" v-for="(item, index) in dataList" :key="index">
            <div
              class="first-column"
              :class="item.ins ? 'machine-title-column' : ''"
            >
              {{ item.name }}
            </div>
            <div class="chart-column">
              <div class="chart">
                <div
                  :id="'heatmap' + index"
                  :style="{ width: '100%', height: '26px' }"
                  v-if="item.ins"
                ></div>
                <!-- <piecesChart
                  :selectStatus="selectStatus"
                  :beginTime="form.dateTime[0]"
                  :endTime="form.dateTime[1]"
                  :da="item.ins"
                  :key="index"
                  :timeSliderValue="timeSliderValue"
                /> -->
              </div>
            </div>
            <div
              class="indicator-title"
              v-for="(obj, ind) in item.attrValueList"
              :key="ind"
              v-show="attrShowList[ind].show"
            >
              <span
                :style="{
                  background: obj.bgColor,
                  color: obj.bgColor == 'yellow' ? '#000' : obj.color,
                }"
              >
                {{ obj.value }}{{ ind == 4 ? '%' : '' }}
              </span>
            </div>
          </div>
        </div>

        <div>
          <!-- datazoom -->
          <div class="table" style="height: 70px">
            <div class="first-column"></div>
            <div class="chart-column" style="height: 30px">
              <div id="timebar"></div>
              <div id="datazoom"></div>
              <div class="datazoom_value">
                <div
                  class="start_value"
                  v-bind:style="{ left: datazoom_value.start + '%' }"
                >
                  {{ datazoom_value.startValue }}
                </div>
                <div
                  class="end_value"
                  v-bind:style="{ left: datazoom_value.end + '%' }"
                >
                  {{ datazoom_value.endValue }}
                </div>
              </div>
            </div>
            <div
              class="indicator-title"
              v-for="(item, index) in attrShowList"
              :key="index"
              v-show="item.show"
            ></div>
          </div>
          <!-- 滑块 -->
          <!-- <div class="silder">
            <el-slider
              tooltip-class="silderclass"
              :step="0.5"
              :marks="marks"
              range
              :format-tooltip="tipFormatter"
              v-model="timeSliderValue"
            ></el-slider>
          </div> -->

          <!-- legend -->
          <div>图例：</div>
          <div id="legend_box"></div>
          <!-- <div class="legend">
            <div>图例：</div>
            <div class="legend-list">
              <div class="legend-item" @click="toggleSelectStatus(3)">
                <span :class="{ bg3: selectStatus.includes(3) }"></span>

                Control alarm
              </div>
              <div class="legend-item" @click="toggleSelectStatus(2)">
                <span :class="{ bg2: selectStatus.includes(2) }"></span>

                Tolerance alarm
              </div>
              <div class="legend-item" @click="toggleSelectStatus(1)">
                <span :class="{ bg1: selectStatus.includes(1) }"></span>

                SCRAP
              </div>
            </div>
          </div> -->
        </div>
      </template>
    </div>
  </section>
</template>

<!--
//性能分析图  https://echarts.apache.org/examples/zh/editor.html?c=custom-profiles
//格式化时间  moment-duration-format
-->
<script>
import dayjs from 'dayjs'
import _ from 'lodash'
import { getWhatResultsList, getWatchChart } from '@/api/monitor'
import { getLines, delLine } from '@/api/line'
import OverViews from './XM/overviews'
// import detailPage from "./detail.vue";
import lineDetail from './XM/lineDetail.vue'
import DateTime from '@/components/DateTime/index.vue'
// import piecesChart from './piecesChart.vue'

let resizeFn = null
let start, scale, end
export default {
  components: { DateTime },
  data() {
    return {
      loading: true,
      rate: 1,
      form: {
        dateTime: [],
      },
      pages: this.$mpages,
      currentIndex: 0,
      currentFlexIndex: 0,
      whatResultsList: [],
      addList: [
        {
          name: '新增',
        },
      ],
      lineList: [],
      // 1-产品名，2-合格，3-不合格，4-总数，5质量，6-报废
      attrList: ['产品型号', '合格', '不合格', '总数', '质量', '报废'],
      attrShowList: [],
      color: ['#3DBA0F', '#FFCB22', '#FF904E', '#FF2222'],
      attributes: null,
      myChart: '',
      visible: false,
      windowWidth: document.documentElement.clientWidth - 186 - 40 - 349, //实时屏幕宽度
      windowHeight: document.documentElement.clientHeight, //实时屏幕高度
      dataList: [],
      charts: [],
      datazoom_value: {
        start: 0,
        end: 100,
        startValue: '',
        endValue: '',
      },
      // 2023/8/21
      timeSliderValue: [0, 100],
      marks: {},
      selectStatus: [3, 2, 1],
    }
  },
  created() {
    this.getLines()

    const end_time = new Date().format('yyyy-MM-dd hh:mm:ss')
    let start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 6)
    let start_time = new Date(start).format('yyyy-MM-dd hh:mm:ss')
    // const start_time = '2023-07-14 00:00:00'
    // const end_time = '2023-07-15 00:00:00'
    this.form.dateTime.push(start_time)
    this.form.dateTime.push(end_time)
    this.updateSliderTime()
  },
  mounted() {
    this.getWhatResultsList() //获取监控指标列表
    this.$nextTick(() => {
      if (this.lineList && this.lineList[0]) {
        this.changeFlexItem(0)
      }
    })

    // 设置datazoom初始值
    this.datazoom_value.startValue = this.form.dateTime[0]
    this.datazoom_value.endValue = this.form.dateTime[1]
  },
  updated() {},
  destroyed() {
    if (resizeFn) {
      window.removeEventListener('resize', resizeFn())
    }
  },
  methods: {
    // 2023/8/21
    //时间滚动条
    updateSliderTime() {
      start = dayjs(this.form.dateTime[0])
      end = dayjs(this.form.dateTime[1])

      // 每刻度时间
      scale = end.diff(start, 'second') / 100
      this.updateMarks()
    },
    updateMarks() {
      let arr = {}
      for (let i = 0; i <= 5; i++) {
        let val = i * 20
        arr[val] = start?.add(scale * val, 'second').format('MM-DD AHH:mm')
      }

      this.marks = arr
    },
    // 滚动条tip格式化
    tipFormatter(val) {
      return start?.add(scale * val, 'second').format('YYYY-MM-DD AHH:mm:ss')
    },
    toggleSelectStatus(key) {
      let temp_arr = [...this.selectStatus]
      let idx = _.indexOf(temp_arr, key)
      if (idx > -1) {
        temp_arr.splice(idx, 1)
      } else {
        temp_arr.push(key)
      }
      this.selectStatus = temp_arr
    },
    // 获取二级菜单
    async getLines() {
      const res = await getLines()
      if (res.status == 200) {
        this.lineList = res.data
      }
    },
    // 获取一级菜单
    async getWhatResultsList() {
      const res = await getWhatResultsList({})
      if (res.status == 200) {
        this.whatResultsList = res.data.concat(this.addList)
        this.getWatchChart()
      }
    },
    // 暂时未用
    async getWatchChartByFirst() {
      let cfgId = this.whatResultsList[this.currentIndex].id
      if (!cfgId) {
        this.currentIndex = 0
        cfgId = this.whatResultsList[this.currentIndex].id
      }
      let request_data = {
        cfgId: cfgId,
        start: this.form.dateTime[0],
        end: this.form.dateTime[1],
      }
      if (this.lineList.length > 0 && this.lineList[this.currentFlexIndex].id) {
        request_data.whatLineId = this.lineList[this.currentFlexIndex].id
      }
      const res = await getWatchChart(request_data)

      if (res.status == 200) {
        let data = []
        let color = this.color
        res.data.attributes.map((item) => {
          color[item.type] = item.color
        })
        this.color = color
        this.attributes = res.data.attributes
        // 默认表头数据，默认全不显示
        let attrShowList = [
          {
            title: '产品名',
            show: false,
          },
          {
            title: '合格',
            show: false,
          },
          {
            title: '不合格',
            show: false,
          },
          {
            title: '总数',
            show: false,
          },
          {
            title: '质量',
            show: false,
          },
          {
            title: '报废',
            show: false,
          },
        ]
        res.data.datas.map((item, idx) => {
          let staticHeader = []
          item.chartData = []
          item.attrValueList = []
          if (item.staticHeader) {
            item.staticHeader.map((vo) => {
              staticHeader[vo.type - 1] = {
                bgColor: vo.color,
                value: vo.value,
              }
              // 根据接口数据动态设置表头的显示，默认全部隐藏，有该数据的话就显示
              attrShowList[vo.type - 1].show = true
            })
            this.attrShowList = attrShowList

            this.attrList.map((vo, key) => {
              let value = {}
              if (staticHeader[key]) {
                value = staticHeader[key]
                value.color = '#fff'
                value.name = vo
              } else {
                value.name = vo
                value.bgColor = 'transparent'
                value.value = ''
              }
              item.attrValueList.push(value)
            })
          }
          if (item.ins) {
            let default_data = []
            let control_data = []
            let tolerance_data = []
            let scrap_data = []
            item.ins.map((vo, key) => {
              // let sub_data = {};
              let sub_data = [vo.k0004, 0, idx, key]
              // sub_data.itemStyle = { color: vo.color };
              default_data.push(sub_data)

              switch (vo.attribute) {
                case 1:
                  control_data.push(sub_data)
                  break
                case 2:
                  tolerance_data.push(sub_data)
                  break
                case 3:
                  scrap_data.push(sub_data)
                  break
              }
              // vo.attributeList.map((v) => {
              //   // 属性类型，1-Control alarm，2-Tolerance alarm，3-SCRAP
              //   switch (v.type) {
              //     case 1:
              //       control_data.push(sub_data);
              //       break;
              //     case 2:
              //       tolerance_data.push(sub_data);
              //       break;
              //     case 3:
              //       scrap_data.push(sub_data);
              //       break;
              //   }
              // });
            })
            item.chartData.push(default_data)
            item.chartData.push(control_data)
            item.chartData.push(tolerance_data)
            item.chartData.push(scrap_data)
          }
          data.push(item)
        })
        this.dataList = data

        this.$nextTick(() => {
          this.drawChart()
        })
        // setTimeout(() => {
        //   this.drawChart()
        // }, 0)
      }
    },

    async getWatchChart() {
      this.dataList = []
      let cfgId = this.whatResultsList[this.currentIndex].id
      if (!cfgId) {
        this.currentIndex = 0
        cfgId = this.whatResultsList[this.currentIndex].id
      }
      let request_data = {
        cfgId: cfgId,
        start: this.form.dateTime[0],
        end: this.form.dateTime[1],
      }
      if (this.lineList.length > 0 && this.lineList[this.currentFlexIndex].id) {
        request_data.whatLineId = this.lineList[this.currentFlexIndex].id
      }

      const res = await getWatchChart(request_data)

      if (res?.status == 200) {
        let data = []
        let color = this.color
        res.data.attributes?.map((item) => {
          color[item.type] = item.color
        })
        this.color = color
        this.attributes = res.data.attributes
        // 默认表头数据，默认全不显示
        let attrShowList = [
          {
            title: '产品名',
            show: false,
          },
          {
            title: '合格',
            show: false,
          },
          {
            title: '不合格',
            show: false,
          },
          {
            title: '总数',
            show: false,
          },
          {
            title: '质量',
            show: false,
          },
          {
            title: '报废',
            show: false,
          },
        ]
        // 数据
        res.data.datas?.map((item, idx) => {
          let staticHeader = []
          item.chartData = []
          item.attrValueList = []
          if (item.staticHeader) {
            item.staticHeader.map((vo) => {
              staticHeader[vo.type - 1] = {
                bgColor: vo.color,
                value: vo.value,
              }
              // 根据接口数据动态设置表头的显示，默认全部隐藏，有该数据的话就显示
              attrShowList[vo.type - 1].show = true
            })
            this.attrShowList = attrShowList

            this.attrList.map((vo, key) => {
              let value = {}
              if (staticHeader[key]) {
                value = staticHeader[key]
                value.color = '#fff'
                value.name = vo
              } else {
                value.name = vo
                value.bgColor = 'transparent'
                value.value = ''
              }
              item.attrValueList.push(value)
            })
          }
          if (item.ins) {
            let default_data = []
            let control_data = []
            let tolerance_data = []
            let scrap_data = []
            item.ins?.map((vo, key) => {
              // let sub_data = {};
              let sub_data = [vo.k0004, 0, idx, key]
              // sub_data.itemStyle = { color: vo.color };
              default_data.push(sub_data)

              switch (vo.attribute) {
                case 1:
                  control_data.push(sub_data)
                  break
                case 2:
                  tolerance_data.push(sub_data)
                  break
                case 3:
                  scrap_data.push(sub_data)
                  break
              }
              // vo.attributeList.map((v) => {
              //   // 属性类型，1-Control alarm，2-Tolerance alarm，3-SCRAP
              //   switch (v.type) {
              //     case 1:
              //       control_data.push(sub_data);
              //       break;
              //     case 2:
              //       tolerance_data.push(sub_data);
              //       break;
              //     case 3:
              //       scrap_data.push(sub_data);
              //       break;
              //   }
              // });
            })
            item.chartData.push(default_data)
            item.chartData.push(control_data)
            item.chartData.push(tolerance_data)
            item.chartData.push(scrap_data)
          }
          data.push(item)
        })
        this.dataList = data
        this.updateSliderTime()

        requestAnimationFrame(() => {
          this.drawChart()
        })

        // setTimeout(() => {
        //   this.drawChart()
        // }, 200)
      }

      // this.loading = false
    },

    drawChart() {
      let that = this
      let data = []
      let symbol_size = [2, 52]
      // let symbol_size = function(value, params){

      //   return [2,52];
      // }
      let emphasis = {
        scale: true,
        itemStyle: {
          color: '#666',
          borderColor: '#666',
          borderWidth: 10,
        },
      }

      let option = {
        legend: {
          show: false,
          left: 0,
          itemWidth: 10,
        },
        color: this.color,
        xAxis: {
          show: false,
          type: 'time',
          min: this.form.dateTime[0],
          max: this.form.dateTime[1],
          position: 'top',
          offset: -30,
          axisTick: {
            show: true,
            alignWithLabel: true,
          },
          axisLabel: {
            show: true,
            formatter: '{MM}-{dd}',
          },
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            type: 'scatter',
            symbol: 'rect',
            symbolSize: symbol_size,
            data: data,
            large: true,
            emphasis: emphasis,
          },
          {
            name: '',
            type: 'scatter',
            symbol: 'rect',
            symbolSize: symbol_size,
            data: data,
            large: true,
            emphasis: emphasis,
          },
          {
            name: '',
            type: 'scatter',
            symbol: 'rect',
            symbolSize: symbol_size,
            data: data,
            large: true,
            emphasis: emphasis,
          },
          {
            name: '',
            type: 'scatter',
            symbol: 'rect',
            symbolSize: symbol_size,
            data: data,
            large: true,
            emphasis: emphasis,
          },
        ],
        dataZoom: {
          show: false,
          left: 'center',
          top: 'middle',
          width: '90%',
          showDetail: false,
          // throttle: 0,
          // realtime: false,
          height: 10,
          handleSize: 16,
          handleIcon:
            'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', //画个圆形
        },
        grid: {
          left: 'center',
          top: 'center',
          width: '90%',
          height: '90%',
        },
      }

      // 绘制每行散点图
      let heatmaps = []

      // 根据数据量来计算图元的宽度
      function getSymbolWidth(data, rate = 1) {
        let value_width = data?.[0]?.length
        let box_width = document.getElementById('datazoom').offsetWidth

        let start_time = Date.parse(new Date(that.form.dateTime[0]))
        let end_time = Date.parse(new Date(that.form.dateTime[1]))
        let length = end_time - start_time

        let min_time = 0
        let max_time = 0
        data?.[0]?.map((item) => {
          if (max_time == 0 || item?.[0] > max_time) max_time = item?.[0]
          if (min_time == 0 || item?.[0] < min_time) min_time = item?.[0]
        })
        let value_length =
          Date.parse(new Date(max_time)) - Date.parse(new Date(min_time))

        let value_rate = value_length / length

        let width = parseInt(
          (box_width * 0.9 * value_rate) / (value_width * rate)
        )
        // console.warn(width);

        if (width === undefined) {
          width = 0
        } else if (width > 6) {
          width = 6
        } else if (width < 1) {
          width = 1
        }

        return width
      }

      this.dataList?.map((item, idx) => {
        if (item.ins && !item.heatmap) {
          this.$echarts.dispose(document.getElementById('heatmap' + idx))
          let heatmap = this.$echarts.init(
            document.getElementById('heatmap' + idx)
          )
          let symbol_width = getSymbolWidth(item.chartData)
          option.series[0].symbolSize[0] = symbol_width
          option.series[1].symbolSize[0] = symbol_width
          option.series[2].symbolSize[0] = symbol_width
          option.series[3].symbolSize[0] = symbol_width

          option.series[0].data = item.chartData[0]

          let attrs_name = ['', 'Control alarm', 'Tolerance alarm', 'SCRAP']
          this.attributes?.map((vo) => {
            option.series[vo.type].name = attrs_name[vo.type]
            option.series[vo.type].data = item.chartData[vo.type]
          })

          heatmap.setOption(option)
          heatmap.on('click', (params) => {
            let idx = params.value
            let value = this.dataList[idx[2]].ins[idx[3]]
            window.open(
              '#/home/detail?k0014=' + value.k0014 + '&k0010=' + value.k0010,
              '_blank'
            )

            // window.location.href =
            //   "#/home/detail?k0014=" + value.k0014 + "&k0010=" + value.k0010;
            // this.$layer.iframe({
            //   shadeClose: false,
            //   content: {
            //     content: detailPage,
            //     parent: this,
            //     data: {k0014: value.k0014, k0010: value.k0010},
            //   },
            //   maxmin: false,
            //   area: ["100%", "100%"]
            // });
          })
          heatmaps.push(heatmap)
          this.$set(item, 'heatmap', heatmap)
        }
      })
      // 绘制统一的timebar
      this.$echarts.dispose(document.getElementById('timebar'))
      let timebar = this.$echarts.init(document.getElementById('timebar'))

      let timebar_option = JSON.parse(JSON.stringify(option))
      timebar_option.series[0].data = []
      timebar_option.series[1].data = []
      timebar_option.series[2].data = []
      timebar_option.series[3].data = []
      timebar_option.xAxis.show = true
      timebar.setOption(timebar_option)

      // 绘制统一的datazoom
      this.$echarts.dispose(document.getElementById('datazoom'))
      let datazoom = this.$echarts.init(document.getElementById('datazoom'))

      let datazoom_option = JSON.parse(JSON.stringify(option))
      datazoom_option.series[0].data = []
      datazoom_option.series[1].data = []
      datazoom_option.series[2].data = []
      datazoom_option.series[3].data = []
      datazoom_option.dataZoom.show = true
      datazoom.setOption(datazoom_option)

      // 监听datazoom，使用datazoomTimer进行节流
      let datazoomTimer = null
      datazoom.on('datazoom', (params) => {
        let value = datazoom.getOption().dataZoom[0]

        this.datazoom_value.start = value.start
        this.datazoom_value.startValue = new Date(value.startValue).format(
          'yyyy-MM-dd hh:mm:ss'
        )
        this.datazoom_value.end = value.end
        this.datazoom_value.endValue = new Date(value.endValue).format(
          'yyyy-MM-dd hh:mm:ss'
        )

        if (datazoomTimer) clearTimeout(datazoomTimer)
        datazoomTimer = requestAnimationFrame(() => {
          // 计算缩放比例，用于计算图元宽度
          let rate = (params.end - params.start) / 100
          this.rate = rate

          requestAnimationFrame(() => {
            heatmaps[0].dispatchAction({
              type: 'dataZoom',
              // 开始位置的百分比，0 - 100
              start: value.start,
              // 结束位置的百分比，0 - 100
              end: value.end,
            })
          })
          // 更新图表
          heatmaps.map((chart) => {
            if (
              chart?._dom?.id != 'legend_box' &&
              chart?._dom?.id != 'datazoom'
            ) {
              // 异步执行
              requestAnimationFrame(() => {
                let idx = chart?._dom?.id.replace(/heatmap/, '')
                symbol_size[0] = getSymbolWidth(
                  that.dataList[idx]?.chartData,
                  rate
                )
                let new_option = {
                  series: [
                    {
                      symbolSize: symbol_size,
                    },
                    {
                      symbolSize: symbol_size,
                    },
                    {
                      symbolSize: symbol_size,
                    },
                    {
                      symbolSize: symbol_size,
                    },
                  ],
                }
                chart.setOption(new_option)
              })
            }
          })
        })
      })

      // heatmaps.push(datazoom);

      // 绘制统一的图例
      this.$echarts.dispose(document.getElementById('legend_box'))
      let legend = this.$echarts.init(document.getElementById('legend_box'))
      datazoom_option.dataZoom.show = false
      datazoom_option.xAxis.show = false
      datazoom_option.legend.show = true
      legend.setOption(datazoom_option)
      heatmaps.push(legend)
      // this.charts = heatmaps;
      // 绑定全部的图表，让datazoom联动
      this.$echarts.connect(heatmaps)

      // 监听窗口变化大小
      let resizeTimer = null
      window.addEventListener(
        'resize',
        (resizeFn = () => {
          this.loading = true
          if (resizeTimer) clearTimeout(resizeTimer)
          resizeTimer = requestAnimationFrame(() => {
            heatmaps.map((chart) => {
              if (
                chart?._dom?.id != 'legend_box' &&
                chart?._dom?.id != 'datazoom'
              ) {
                requestAnimationFrame(() => {
                  let idx = chart?._dom?.id.replace(/heatmap/, '')
                  symbol_size[0] = getSymbolWidth(
                    that.dataList[idx]?.chartData,
                    this.rate
                  )
                  let new_option = {
                    series: [
                      {
                        symbolSize: symbol_size,
                      },
                      {
                        symbolSize: symbol_size,
                      },
                      {
                        symbolSize: symbol_size,
                      },
                      {
                        symbolSize: symbol_size,
                      },
                    ],
                  }
                  chart.setOption(new_option)
                  chart.resize()
                })
              }
              // chart.resize();
            })
            // datazoom.resize();

            this.loading = false
          })
        })
      )

      this.loading = false
    },
    changeTab(row, index) {
      if (!row.id) {
        this.$layer.iframe({
          shadeClose: false,
          content: {
            content: OverViews,
            parent: this,
            data: { row: row },
          },
          maxmin: true,
          area: ['1200px', '600px'],
          title: row.id ? '编辑' : '新增',
        })
      } else {
        this.loading = true
        this.currentIndex = index
        this.getWatchChart()
      }
    },
    changeFlexItem(index) {
      this.loading = true
      this.currentFlexIndex = index
      this.getWatchChart()
    },
    changeDateTime(e) {
      this.loading = true
      this.form.dateTime = e
      this.datazoom_value.startValue = e[0]
      this.datazoom_value.endValue = e[1]
      this.getWatchChart()
    },
    editLine(row) {
      this.$layer.iframe({
        shadeClose: false,
        content: {
          content: lineDetail,
          parent: this,
          data: { row: row },
        },
        maxmin: true,
        area: ['600px', '600px'],
        title: row.id ? '编辑' : '新增',
      })
    },
    add_item() {
      this.editLine({})
    },
    delLine(id) {
      this.$confirm('此操作将永久删除该选项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        const { status } = await delLine(id)

        if (status == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })

          this.getLines()
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.silder {
  padding: 0 150px;
}

::v-deep .el-slider__button {
  width: 6px !important;
  height: 6px !important;
}
::v-deep .el-slider__marks-text {
  font-size: 12px;
  width: 100px;
}
.legend {
  margin-top: 3px;
}
.legend-list {
  margin-top: 5px;
  display: flex;
  .legend-item {
    display: flex;
    align-items: center;
    margin-right: 16px;
    cursor: pointer;
    span {
      display: inline-block;
      width: 20px;
      height: 14px;
      border: 0px solid #ffffff;
      opacity: 1;
      border-radius: 0px;
      margin-right: 6px;
      background-color: #999;
    }
    .bg3 {
      background: #f3aa7c;
    }
    .bg2 {
      background: #f8d771;
    }
    .bg1 {
      background: #ee655c;
    }
  }
}
.page-home {
  width: 100% !important;
  height: calc(100vh - 71px);
  color: rgba(16, 16, 16, 100);
  font-family: SourceHanSansSC-regular;
  margin: auto 0 0 0;
  // display: flex;
  // flex-direction: column;
  .main_top {
    .date_wrap {
      margin: 0px 15px 0 21px;
      display: flex;
      .date_img {
        vertical-align: middle;
        margin-right: 10px;
      }
    }
    .nav_wrap {
      margin-top: 20px;
      display: flex;
      align-items: center;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background: #3694ff;
      .nav_item {
        color: #fff;
        padding: 0px 20px;
        border-right: 1px solid #fff;
        cursor: pointer;
      }
      .nav_item:last-child {
        border-right: 0;
      }
      .nav_item.active {
        background-color: rgba(39, 97, 219, 100);
      }
      .nav_item:hover {
        background-color: rgba(39, 97, 219, 100);
      }
    }
    .flex_wrap {
      margin: 15px 15px 0 21px;
      border-radius: 4px;
      background-color: rgba(62, 62, 62, 100);
      .flex_box {
        height: 48px;
        padding: 0 13px;
        display: flex;
        align-items: center;
        .flex_item {
          display: flex;
          cursor: pointer;
          align-items: center;
          border-radius: 4px;
          border: 1px solid rgba(187, 187, 187, 100);
          font-size: 12px;
          color: #fff;
          padding: 8px;
          margin-right: 7px;
          img {
            vertical-align: middle;
            height: 16px;
          }
          .label {
            display: inline-block;
            height: 16px;
          }
        }
        .flex_item.active {
          background-color: rgba(54, 148, 255, 100);
          border: 1px solid rgba(54, 148, 255, 100);
        }
        .flex_item:hover {
          background-color: rgba(54, 148, 255, 100);
          border: 1px solid rgba(54, 148, 255, 100);
        }
        .setting {
          margin-left: 5px;
          margin-right: 5px;
        }
        .setting,
        .delete {
          display: none;
        }
        .flex_item:hover .setting,
        .flex_item:hover .delete {
          display: block;
        }
      }
    }
  }
  .main_center {
    margin: 15px 15px 0 21px;
    background: #fff;
    border: 1px solid #d7d7d7;
    padding: 20px;
    // position: relative;
    // height: 300px;
    height: calc(100vh - 360px);
    // flex: 1;
    display: flex;
    flex-direction: column;
    // overflow-y: scroll;
    // display: table;
    // content: "";
    // clear: both;

    .table-container {
      flex: 1;
      overflow-y: scroll;
    }
    #legend_box {
      height: 26px;
    }
    .table {
      background: white;
      margin-bottom: 10px;
      display: flex;
      width: 100%;
      font-size: 12px;
      height: 26px;
      // line-height: 26px;
      align-items: center;
      .first-column {
        // min-width: 100px;
        width: 200px;
        height: 26px;
        line-height: 26px;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .machine-title-column {
        // text-align: right;
        padding-left: 20px;
      }

      .chart-column {
        flex: 1;
        height: 26px;
        #datazoom {
          height: 100%;
        }
        #timebar {
          height: 100%;
        }
        .datazoom_value {
          position: relative;
          width: 90%;
          margin: 5px auto;
          // background: red;
          // height: 26px;
          .start_value {
            position: absolute;
            top: -20px;
            white-space: nowrap;
            transform: translateX(-110%);
          }
          .end_value {
            position: absolute;
            white-space: nowrap;
            top: -20px;
            transform: translateX(10%);
            // transform: translateX(-50%);
          }
        }
      }
      .indicator-title {
        min-width: 55px;
        padding: 0 0.25em;
        text-align: center;
        span {
          display: inline-block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          border-radius: 0.25em;
          margin: 0 2px;
          padding: 0.2em 0.6em 0.3em;
        }
      }
    }
  }
}
</style>
